<template>
<load v-if="this.$store.state.isLoad"></load>
  <div class="gratis" v-else-if="!this.$store.state.isLoad">
    <div v-for="(item,index) in listData" :key="index" @click="goDetail(item.comic_id)">
      <rankingComics
        :img="item.vertical_cover"
        :title="item.title"
        :itemAuthor="item.author[0]"
        :name="item.styles.name"
        :last_short_title="item.last_short_title"
      ></rankingComics>
    </div>
  </div>
</template>

<script>
import load from "../components/Load.vue";
import rankingComics from "../components/RankingComics.vue";
export default {
  name: "Gratis",
  components: {
    rankingComics,
    load
  },
  data() {
    return {
      listData: [],
    };
  },
  created() {
    // console.log(this.$route.params.type);
    this.getData(this.$route.params.type)
  },
  methods: {
    goDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id: id,
        },
      });
    },
    getData(typeNum) {
      this.axios({
        method: "get",
        url: "/HomeHot",
        params: {
          type: typeNum,
        },
      })
        .then((res) => {
          // console.log("res ==>", res);
          this.listData = res.data.data;
          // console.log("this.listData ==> ", this.listData);
        })
        .catch((err) => {
          console.log("err ==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>